<template>
    <div class="show-list">
        <div class="show-item-wrap" v-for="item in showlist" :key="item.seqNo">
            <div class="show-item">
                <div class="time-block">
                    <div class="begin">{{item.tm}}</div>
                    <div class="end">
                        <span class="exit">{{item.tm}}退场</span>
                    </div>
                </div>
                <div class="info-block">
                    <div class="lan">{{item.lang}} {{item.tp}}</div>
                    <div class="hall">{{item.th}}</div>
                </div>
                <div class="price-block">
                    <div class="sell">
                        <span class="rmb">￥</span>
                        <span class="s-price">{{item.baseSellPrice}}</span>
                    </div>
                    <div class="vip">
                        <span class="icon">{{item.vipPriceName}}</span>
                        <span class="v-price">￥{{item.vipPrice}}</span>
                    </div>
                    <div class="disc">{{item.extraDesc}}</div>
                </div>
                <div class="button-block">
                    <div class="button">购票</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        showlist:[Object,Array]
    }
}
</script>

<style lang="less" scoped>
.show-list{
    .show-item-wrap{
        padding: 17px 12.5px;
        position: relative;
        .show-item{
            display: flex;
            align-items: center;
            .time-block{
                position: relative;
                .begin{
                    font-size: 20px;
                    color: #333;
                    line-height: 1;
                    white-space: nowrap;
                }
                .end{
                    margin-top: 10px;
                    
                    line-height: 1;
                    white-space: nowrap;
                    .exit{
                        color: #999;
                        font-size: 11px;
                    }
                }
            }
            .info-block{
                margin-left: 17px;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                .lan{
                    margin-top: 2px;
                    line-height: 18px;
                    font-size: 13px;
                    color: #333;
                    white-space: normal;
                }
                .hall{
                    margin-top: 7px;
                    font-size: 11px;
                    color: #999;
                    white-space: normal;
                }
            }
            .price-block{
                -webkit-box-flex: 0;
                -webkit-flex: 0 1 auto;
                flex: 0 1 auto;
                width: 130px;
                margin-left: 5px;
                .sell{
                    display: inline-block;
                    line-height: 1;
                    color: #f03d37;
                    margin-top: 1px;
                    
                    .rmb{
                        font-size: 11px;
                    }
                    .s-price{
                        font-size: 19px;
                    }
                }
                .vip{
                    display: inline-block;
                    line-height: 15px;
                    // height: 15px;
                    -webkit-transform: scale(.8);
                    transform: scale(.8);
                    -webkit-transform-origin: left;
                    transform-origin: left;
                    margin: 0 -16px 0 4px;
                    border: 1px solid #ff9000;
                    border-radius: 2px;
                    
                    .icon{
                        display: inline-block;
                        color: #fff;
                        background-color: #f90;
                        font-size: 12px;
                    }
                    .v-price{
                        display: inline-block;
                        padding: 0 2px;
                        color: #f90;
                        background-color: #fff;
                        font-size: 12px;
                    }
                }
                .disc{
                    margin-top: 5px;
                    display: block;
                    font-size: 11px;
                    color: #999;
                }
            }
            .button-block{
                width: 45px;
                margin-left: 2px;
                position: relative;
                .button{
                    position: absolute;
                    top: 50%;
                    -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
                    width: 100%;
                    height: 25px;
                    line-height: 26px;
                    font-size: 12px;
                    border: 1px solid #f06762;
                    border-radius: 50px;
                    color: #f03d37;
                    text-align: center;
                }
            }
        }
    }
}
</style>